<template>
  <div class="table-container">
    <!--表格头部-->
    <div class="table-box__header">
      <!--搜索区-->
      <Transition>
        <div v-show="searchCard">
          <slot name="searchCard"></slot>
        </div>
      </Transition>

      <!--按钮区-->
      <div class="table-box__btn-box flex justify-between">
        <div class="btn-box__left">
          <slot name="btnLeft"></slot>
        </div>
        <div class="btn-box__right flex">
          <div class="btn-right__item">
            <slot name="btnRight"></slot>
          </div>
          <div class="btn-right__item">
            <!--搜索-->
            <el-link :underline="false" @click="switchSearchCard">
              <el-icon :size="18" style="font-width: 800">
                <Search />
              </el-icon>
            </el-link>
          </div>
          <div class="btn-right__item">
            <!--刷新-->
            <el-link :underline="false">
              <el-icon :size="18" style="font-width: 800">
                <RefreshRight />
              </el-icon>
            </el-link>
          </div>
          <div class="btn-right__item">
            <!--列设置-->
            <el-link :underline="false">
              <el-icon :size="18" style="font-width: 800">
                <Setting />
              </el-icon>
            </el-link>
          </div>
          <div class="btn-right__item">
            <!--导入-->
            <el-link :underline="false">
              <el-icon :size="18" style="font-width: 800">
                <Upload />
              </el-icon>
            </el-link>
          </div>
          <div class="btn-right__item">
            <!--导出-->
            <el-link :underline="false">
              <el-icon :size="18" style="font-width: 800">
                <Download />
              </el-icon>
            </el-link>
          </div>
          <div class="btn-right__item">
            <!--打印-->
            <el-link :underline="false">
              <el-icon :size="18" style="font-width: 800">
                <Printer />
              </el-icon>
            </el-link>
          </div>
        </div>
      </div>
      <!--选择提示区-->
    </div>
    <!--表格主体-->
    <div class="table-box mt-5">
      <slot></slot>
      <!--分页-->
      <Pagination
        v-if="isPage && pageInfo && Object.keys(pageInfo).length"
        :current="pageInfo?.current"
        :page-size="pageInfo?.pageSize"
        :total="pageInfo?.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></Pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import Pagination from "@/components/Pagination/index.vue";
import { TPager } from "@/typings/global";

defineOptions({
  name: "TableContainer"
});

const searchCard = ref(true);
const { pageInfo, isPage = true } = defineProps<{
  pageInfo?: TPager;
  isPage?: Boolean;
}>();

console.log("=>(index.vue:96) pageInfo", pageInfo);

const emits = defineEmits(["switchSearchCard", "sizeChange", "currentChange"]);

const switchSearchCard = () => {
  searchCard.value = !searchCard.value;
};

const handleSizeChange = (size: number) => {
  emits("sizeChange", size);
};

const handleCurrentChange = (current: number) => {
  emits("currentChange", current);
};
</script>

<style scoped lang="scss">
.table-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  .btn-right__item {
    &:not(:last-child) {
      margin-right: 10px;
    }
  }
}
</style>
